import type { RouteMeta } from 'vue-router'
import { Icon } from '@/components/Icon'
import {ElBadge} from "element-plus"
import './style.css'
import { useMenuStore } from '@/store/modules/menu'

export const useRenderMenuTitle = () => {
  const menuStore=useMenuStore();
  const renderMenuTitle = (meta: RouteMeta) => {
    const { title = 'Please set title', icon} = meta
    const badge=menuStore.getBadge(meta);
    return <>
      {icon ? <Icon icon={meta.icon}></Icon>:<></>}
      {badge?<ElBadge value={badge} style=''><span class="v-menu__title">{title}</span></ElBadge>:<span class="v-menu__title">{title}</span>}
    </>
  }
  return {
    renderMenuTitle
  }
}
